<template>
	<template v-if="isAlready">
		<!--class="dyAssetCardModel-->
		<div style="width: 100%;">
			<template v-if="drag">
				<draggable class="widgetDragAreaClass" v-model="widget.props.columns" animation="300"
						   :style="'height:'+ dragAreaHeight+'px;'"
						   item-key="id" :group="{name:'columns'}"
						   @change="dragChange(widget.props.columns)">
					<template #item="{ element }">
						<el-col class="colItemClass"
						 :span="element.colSpan?element.colSpan:widget.props.colSpan">
							<ex-form-item :column="element" :model="model"
										  :size="widget.props.widgetSize"
										  :label-width="widget.props.labelWidth+'px'" :label-position="widget.props.labelPosition" :span="widget.props.colSpan"
										  drag/>
						</el-col>
					</template>
				</draggable>
			</template>
			<template v-else>
				<template v-for="element in widget.props.columns">
					<el-col v-if="element.hidden!==true && element.widgetType==='file' && element.listType==='text'" class="_colItemClass" :style="'height:'+ colitemheight+'px;'"
							:span="element.colSpan?element.colSpan:widget.props.colSpan">
						<ex-form-item :column="element" :model="model"
						@changeHeight="changeHeight"
									  :size="widget.props.widgetSize"
									  :label-width="widget.props.labelWidth+'px'"
									  :label-position="widget.props.labelPosition" :span="widget.props.colSpan"

									  />
					</el-col>
					<el-col v-else-if="element.hidden!==true" class="_colItemClass"
							:span="element.colSpan?element.colSpan:widget.props.colSpan">
						<ex-form-item :column="element" :model="model"
						@changeHeight="changeHeight"
									  :size="widget.props.widgetSize"
									  :label-width="widget.props.labelWidth+'px'"
									  :label-position="widget.props.labelPosition" :span="widget.props.colSpan"

									  />
					</el-col>
				</template>
			</template>
		</div>
	</template>
</template>
<script>

import draggable from "vuedraggable";
import ExFormItem from "@/components/exFormItem/index.vue";
import formRule from "@/utils/formRule";

export default {
	name: "dyCard",
	components: {ExFormItem, draggable},
	props: {
		model: {type: Object, default: {}},
		widget: {type: Object, default: null},
		drag: {type: Boolean, default: false},
	},
	data() {
		return {
			isAlready: false,
			dragAreaHeight: 150,
			colitemheight:45
		}
	},
	async created() {
		if (!this.widget.props.columns) {
			this.widget.props.columns = [];
		}
		if (!this.widget.props.labelWidth) {
			this.widget.props.labelWidth = 100;
		}
		for (const column of this.widget.props.columns) {
			let oriColumn = await this.$cache.data.loadColumn(column.columnId);
			Object.assign(column, oriColumn);
		}
		this.isAlready = true;
	},
	methods: {
		dragChange: function (columns) {
			columns.forEach((item, index) => {
				item.orderWeight = index;
			});
		},
		changeHeight(height){
			this.colitemheight=height;
		}
	}
}
</script>
